<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入重置样式表 -->
    <link rel="stylesheet" href="../css/reset.css" />
    <!-- 2.引入常态化样式表 -->
    <link rel="stylesheet" href="../css/normalize.css" />
    <!-- 3.引入公共样式 -->
    <link rel="stylesheet" href="../css/common.css" />
    <!-- 5.引入当前页样式 -->
    <link rel="stylesheet" href="../css/api-index.css" />
</head>

<body>
    <div id="header"></div>
    <header class="flex-c-sb b-box">
        <a href="#">
            <h1></h1>
        </a>
        <!-- 导航列表 -->
        <ul class="flex-c-c">
            <li>
                <a href="../html/index.html">首页</a>
            </li>
            <li class="active">
                <a href="../html/api-index.html">API</a>
            </li>
            <li>
                <a href="#">云服务</a>
            </li>
            <li>
                <a href="../html/unicorn-index.html">案例</a>
            </li>
            <li>
                <a href="#">开发者</a>
            </li>
        </ul>
        <!-- 按钮 -->
        <div class="fc-white">
            <a href="../html/change.html">登录</a>
            <a href="../html/loginzc.html">注册有礼</a>
        </div>
    </header>
    <main>
        <!-- 表单部分 -->
        <div class="container textTop">
            <h2>API分类</h2>
            <ul class="list"></ul>
            <div class="inp">
                <span>全部</span>
                <input type="text" name="" id="" placeholder="身份证实名">
            </div>
        </div>
        <!-- 列表部分 -->
        <div class="apiCards">
            <ul class="container list"></ul>
        </div>
        <!-- 分页 -->
        <div class="page">
            <ul class="list container">
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </div>
    </main>
    <!-- 尾部 -->
    <footer>
        <div id="BOX">
            <img src="../imgs/top.png" alt="图片已损坏">
        </div>
        <!-- 尾部上面部分 -->
        <div class="container bigBox flex-c-sb">
            <!-- 联系与支持 -->
            <div class="listToo flex-c-sb">
                <ul class="list">
                    <li class="on">
                        联系与支持
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                </ul>
                <ul class="list">
                    <li class="on">
                        联系与支持
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                </ul>
                <ul class="list">
                    <li class="on">
                        联系与支持
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                </ul>
                <ul class="list">
                    <li class="on">
                        联系与支持
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                </ul>
                <ul class="list">
                    <li class="on">
                        联系与支持
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                    <li>
                        400.882.7715
                    </li>
                </ul>
            </div>
            <!-- 微信公众 -->
            <div class="wx">
                <ul class="list">
                    <li class="on">
                        微信公众号
                    </li>
                    <li class="fz-12">源码时代</li>
                    <li>
                        <img src="../imgs/wechat-white.png" alt="图片已损坏">
                    </li>
                </ul>
            </div>
        </div>
        <div class="flex-c-sb container footBottom">
            <div class="imgTwo">
                <img src="../imgs/bei2.png" alt="">
                <img src="../imgs/bei1.png" alt="">
                <span class=" fz-12">
                    增值电信业务经营许可证：蜀B2-20180596蜀ICP备15006450号-3营业执照
                </span>
            </div>
            <p class=" fz-12">源码大数据股份有限公司©版权所有</p>
        </div>

    </footer>
    <!-- 模态框 -->
    <div id="mask">
        <div class="box">
            <div>
                <img src="../imgs/loginlogo.png" alt="图片已损坏">
                <p class="maskText">
                    <a href="#" class="on">账号登录</a>
                    <span>|</span>
                    <a href="#">扫码登录</a>
                </p>
            </div>
            <!-- 表单登录区域 -->
            <form id="loginForm" action="index.html" method="post">
                <p>
                    <span></span>
                    <input type="text" name="" id="" placeholder="用户名/手机号/邮箱" />
                </p>
                <p>
                    <span></span>
                    <input type="password" name="" id="" placeholder="密码" />
                </p>
                <!-- 忘记密码 -->
                <p class="getpwd">
                    <a href="#">忘记密码</a>

                </p>
                <!-- 登录 -->
                <p>
                    <input type="submit" name="" id="but" value="登录">
                </p>
                <!-- 立即注册 -->
                <p class="reg">还没有账号，<a>立即注册&gt;</a></p>
            </form>
            <!-- 扫码登录区 -->
            <form id="sweep" action="index.html" method="post">
                <div class="qrcode">
                    <img src="../imgs/wechat-white.png" alt="图片已损坏">
                    <p>微信扫码登录</p>
                    <p>未关注源码科技公众号，请先关注后再登录</p>
                </div>
                <p id="regis">还没有源码账号，
                    <a href="#">立即注册&gt;</a>
                </p>
            </form>

        </div>
    </div>
    <script src="../js/util.js"></script>
    <script src="../js/api-index.js"></script>
</body>

</html>